
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
	<head>
		<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="content-language" content="de" />
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
		<meta name="DC.language" content="de" />
		<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.structure-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.theme-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile-1.1.1.min.css" />
		<link type="text/css" rel="stylesheet" href="css/mobile.css" />
		<link type="text/css" rel="stylesheet" href="css/cityguide.css" />
		<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
		<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-mobile/jquery.mobile-1.1.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
		<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
		<script type="text/javascript" src="ui/jquery.ui.map.services.js"></script>
		<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
		<script type="text/javascript" src="js/cityguide.js"></script>
	
		<script type="text/javascript">
			/* detect device */

			var mobileDemo = {
				'center' : '57.7973333,12.0502107',
				'zoom' : 10
			};
			
			var ways = [		{name: "s1", location: 'Ägyptisches Museum, München'},
			                    {name: "s2", location: 'Alte Pinakothek, München'},
			                    {name: "s3", location: 'Neue Pinakothek, München'},
			                    {name: "s4", location: 'Brandhorst Museum, München'},
			                    {name: "s5", location: 'Glyptothek, München'},
			                    {name: "s6", location: 'Pinakothek der Moderne, München'},
			                    {name: "s7", location: 'Bayerisches Nationalmuseum, München'},
			                    {name: "s8", location: 'Deutsches Museum, München'}
			                ];
			var  locationMarker = new  google.maps.MarkerImage('img/icons/star-3.png',
		                    	  new google.maps.Size(32,37),
		                     	  new google.maps.Point(0,0),
		                     	  new google.maps.Point(19,35));
			
			////////////////////////////////////////////////////////////

			$('#map_page').live('pageinit', function() {
				
				demo.add('map_page', function() {
					
					var map = $('#map_canvas').gmap({
						'center' : mobileDemo.center,
						'zoom' : mobileDemo.zoom,
						'disableDefaultUI' : true,
						'callback' : function(map) {
							var self = this;
							
							var waypts = [];

			                for (var i in ways) {
			                    waypts.push({
			                        location: ways[i].location,
			                        stopover:true
			                    });
			                }

							var l1 = $("#lat").text ();
				  			var l2 = $("#lng").text ();
				  			console.log(l1,l2);
							self.displayDirections({ 'origin': l1 + ',' + l2, 
													 'destination': l1 + ',' + l2,
													  'waypoints': waypts,
													  'optimizeWaypoints': true,
													 'travelMode': google.maps.DirectionsTravelMode.WALKING }, 
													 { 'panel': document.getElementById('directions'), 'suppressMarkers':true}, function(response, status) {
								//( status === 'OK' ) ? $('#results').show() : $('#results').hide();
								//console.log("result: " , response.routes[ 0 ].legs[ 0 ]);
								var leg = response.routes[0].legs[0];
								console.log(leg);
								self.addMarker({ 
									    'current': true,										
									    'icon': locationMarker,
										'position': new google.maps.LatLng(leg.start_location.lat(),leg.start_location.lng()), //lat lon
										'bounds': true
									}).click(function() {
													self.openInfoWindow({ 'content': "Ich" }, this);
									});

									self.find('markers', {'property': 'foo', 'value':'bar'}, function(marker, found){
										if(marker.current){
											marker.setAnimation(google.maps.Animation.BOUNCE);
										}
									});
								});
							
							// etc....
						
							//console.log("currentPosition",self.currentPosition);
							
                 	
							 
							
						}
						
						
						
					});
					
					
				
                 
                 var  locationMarker = new  google.maps.MarkerImage('img/icons/current.png',
                     new google.maps.Size(32,37),
                     new google.maps.Point(0,0),
                     new google.maps.Point(19,35)
                 );

                 // CurrentPosition Marker
                
					
					// Set POIs
					$.getJSON( 'data/mueseum.json', function(data) { 
						$.each( data.markers, function(i, marker) {
							//console.log(i, marker);
							var  interestMarker = new  google.maps.MarkerImage('img/icons/loc-' + (i+1) + '.png',
                    				new google.maps.Size(32,37),
                     				new google.maps.Point(0,0),
                     				new google.maps.Point(19,35)
                 			);

							$('#map_canvas').gmap('addMarker', { 
								'icon': interestMarker,
								'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
								'bounds': true
							}).click(function() {
								$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content, 'title':marker.title }, this);
							});
							
							
						});
					});
					
					
				}).load('map_page');
			});

			$('#map_page').live('pageshow', function() {
				demo.add('map_page', function() {
					$('#map_canvas').gmap('refresh');
				}).load('map_page');
			});
			
			$('#start_page').live('pagecreate',function(event) {
				
				navigator.geolocation.getCurrentPosition (function (pos)
							{
							 var lat = pos.coords.latitude;
							 var lng = pos.coords.longitude;
							 $("#lat").text (lat);
				  			 $("#lng").text (lng);
							});
							
				
		        $("#loginSend").click( function (e) {
		                $.mobile.changePage("#select_page");
		        });
		    });
		    
		    $('#select_page').live('pagecreate',function(event) {
		        $("#townSend").click( function (e) {
		                $.mobile.changePage("#detail_page");
		                
		        });
		    });
		    
		    $('#liste_page').live('pagecreate',function(event) {
		        $("#tourSend").click( function (e) {
		                $.mobile.changePage("#map_page");
		                
		        });
		    });
		    
		    

		</script>
	</head>
	<body>
		<!-- # H O M E P A G E ##################################################################### -->
		<span id="lat" style="display:none">48.1455977</span>
    	<span id="lng" style="display:none">11.5521592</span>
		<div id="start_page" data-role="page">
			<!--<div data-role="header">
        		<h1>Header</h1>
   				</div>-->
			<div data-role="content">
				
				<form action="select-page" method="get">
				<div data-role="fieldcontain">
					<label for="loginId">Benutzername:</label>
					<input type="text" name="loginId" id="loginId" data-theme="c"/>
				</div>
				<div data-role="fieldcontain">
					<label for="loginPw">Passwort:</label>
					<input type="password" name="loginPw" id="loginPw" data-theme="c"/>
				</div>
					<input id="loginSend" class="ui-btn-hidden" type="submit" value="Login" aria-disabled="false">
				</form>
				
			</div>
			<!-- <div data-role="footer">
        		<p>Footer</p>
   				</div>-->
		</div>
		<!-- # P A G E 1 ##################################################################### -->
		<div id="select_page" data-role="page">
			<div data-role="content">
				<h3>Hallo, User</h3>
				<p>
					wähle einen Ort für deine Städte Tour aus:
				</p>
				<form action="select-page" method="get">
				<div data-role="fieldcontain">
					<label for="select-choice-0" class="select">Land:</label>
					<select name="select-choice-0" id="select-choice-0">
					   <option value="deutschland">Deutschland</option>
					</select>
				</div>
				<div data-role="fieldcontain">
					<label for="select-choice-1" class="select">Stadt:</label>
					<select name="select-choice-1" id="select-choice-1">
					   <option value="muenchen">München</option>
					   <option value="nuernberg">Nürnberg</option>
					</select>
				</div>
				<button id="townSend" type="button" name="submit" value="submit" data-theme="c">Route auswählen</button>
			</div>
		</div>
		<!-- # P A G E 2 ##################################################################### -->
		<div id="detail_page" data-role="page">
			<div data-role="content">
				<div style="margin:15px;">
				<form>
					<h3>Verfügbare Touren für München:</h3>
				<ul data-role="listview" data-inset="true">
					<li><a href="#liste_page">Museeums Tour</a></li>
					<li><a href="index.html">Kirchen Tour</a></li>
					<li><a href="index.html">Historische Tour</a></li>
					<li><a href="index.html">Schlösser Tour</a></li>
					<li><a href="index.html">Kultur und Menschen</a></li>
				</ul>
				</form>
				</div>
			</div>
			<div data-role="footer" class="nav-glyphish-example" data-fullscreen="true" data-position="fixed">
				<div data-role="navbar" class="nav-glyphish-example" data-grid="b">
				<ul>
					<li><a href="#start_page" id="detail_nav_login" data-icon="custom">Login</a></li>
					<li><a href="#select_page" id="detail_nav_select" data-icon="custom">Select</a></li>
					<li><a href="#map_page" id="detail_nav_map" data-icon="custom">Map</a></li>
				</ul>
				</div>
			</div>
		</div>
		<!-- # P A G E 3 ##################################################################### -->
		<div id="liste_page" data-role="page">
			<div data-role="content">
				<div style="margin:15px;">
				<form>
					<h3>Stationen der Mueseen Tour in München:</h3>
				<ol data-role="listview" data-inset="true">
					<li><a href="index.html">Glyptothek</a></li>
					<li><a href="index.html">Alte Pinakothek</a></li>
					<li><a href="index.html">Neue Pinakothek</a></li>
					<li><a href="index.html">Pinakothek der Moderne</a></li>
					<li><a href="index.html">Museum Brandhorst</a></li>
					<li><a href="index.html">Schack-Galerie</a></li>
					<li><a href="index.html">Villa Stuck</a></li>
					<li><a href="index.html">Bayerisches Nationalmuseum</a></li>
					<li><a href="index.html">Ägyptisches Museum</a></li>
					<li><a href="index.html">Deutsches Museum</a></li>
				</ol>
				<button id="tourSend" type="button" name="submit" value="submit" data-theme="c">Tour starten</button>
				</form>
				</div>
			</div>
		</div>
		<!-- # P A G E 3 ##################################################################### -->
		<div id="liste_detail_page" data-role="page">
			<div data-role="content">
				<div style="margin:15px;">
				<form>
					<h3>Stationen der Mueseen Tour in München:</h3>
				<ol data-role="listview" data-inset="true">
					<li><a href="index.html">Glyptothek</a></li>
					<li><a href="index.html">Alte Pinakothek</a></li>
					<li><a href="index.html">Neue Pinakothek</a></li>
					<li><a href="index.html">Pinakothek der Moderne</a></li>
					<li><a href="index.html">Museum Brandhorst</a></li>
					<li><a href="index.html">Schack-Galerie</a></li>
					<li><a href="index.html">Villa Stuck</a></li>
					<li><a href="index.html">Bayerisches Nationalmuseum</a></li>
					<li><a href="index.html">Ägyptisches Museum</a></li>
					<li><a href="index.html">Deutsches Museum</a></li>
				</ol>
				<button id="tourSend" type="button" name="submit" value="submit" data-theme="c">Tour starten</button>
				</form>
				</div>
			</div>
		</div>
		<!-- # P A G E 4 ##################################################################### -->
		<div id="map_page" data-role="page" data-position="fixed">
			<div data-role="content" style="padding:0px!important">
				<!-- <div class="ui-bar-c ui-corner-all ui-shadow" style="padding-top:1em;"> -->
				<div id="map_canvas" style="height:600px"></div>
			</div>
			<div data-role="footer" class="nav-glyphish-example" data-fullscreen="true" data-position="fixed">
				<div data-role="navbar" class="nav-glyphish-example" data-grid="b">
				<ul>
					<li><a href="#start_page" id="map_nav_login" data-icon="custom">Login</a></li>
					<li><a href="#select_page" id="map_nav_select" data-icon="custom">Select</a></li>
					<li><a href="#detail_page" id="map_nav_detail" data-icon="custom">Detail</a></li>
				</ul>
				</div>
			</div>
		</div>
	</body>
</html>